<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>空列表页面 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #2196f3;
      font-weight: 500;
    }
    
    /* 样式式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #2196f3;
      color: white;
    }
    
    /* 通用空列表页面样式 */
    .empty-page {
      display: none;
      min-height: calc(100vh - 101px);
      padding: 20px;
      box-sizing: border-box;
    }
    
    .empty-page.active {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    /* 空状态基础样式 */
    .empty-container {
      text-align: center;
      max-width: 300px;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      opacity: 0.3;
    }
    
    .empty-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
    }
    
    .empty-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 25px;
      line-height: 1.5;
    }
    
    .empty-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .btn {
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .btn-primary {
      background-color: #2196f3;
      color: white;
    }
    
    .btn-primary:hover {
      background-color: #1976d2;
    }
    
    .btn-secondary {
      background-color: #f5f7fa;
      color: #333;
    }
    
    .btn-secondary:hover {
      background-color: #e9ecef;
    }
    
    /* 样式1 - 标准空状态 */
    .standard-empty {
      background-color: #f5f7fa;
    }
    
    .standard-empty .empty-container {
      padding: 40px 20px;
    }
    
    /* 样式2 - 卡片式空状态 */
    .card-empty {
      background-color: #f5f7fa;
    }
    
    .card-empty .empty-container {
      background-color: #fff;
      padding: 50px 30px;
      border-radius: 16px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }
    
    .card-empty .empty-icon {
      font-size: 70px;
      margin-bottom: 25px;
    }
    
    .card-empty .empty-title {
      font-size: 20px;
    }
    
    /* 样式3 - 简约空状态 */
    .simple-empty {
      background-color: #fff;
    }
    
    .simple-empty .empty-container {
      padding: 30px 20px;
    }
    
    .simple-empty .empty-icon {
      font-size: 50px;
      margin-bottom: 15px;
    }
    
    .simple-empty .btn {
      width: 100%;
    }
    
    /* 样式4 - 引导式空状态 */
    .guide-empty {
      background-color: #fff;
      justify-content: flex-start;
      padding-top: 60px;
    }
    
    .guide-empty .empty-container {
      max-width: 100%;
    }
    
    .guide-empty .empty-illustration {
      width: 220px;
      height: 220px;
      margin: 0 auto 30px;
      position: relative;
    }
    
    .guide-empty .illustration-bg {
      width: 100%;
      height: 100%;
      background-color: #f0f7ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .guide-empty .empty-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
      font-size: 80px;
    }
    
    .guide-steps {
      margin: 40px 0 30px;
      padding: 0 10px;
    }
    
    .guide-step {
      display: flex;
      align-items: flex-start;
      margin-bottom: 25px;
    }
    
    .step-number {
      width: 24px;
      height: 24px;
      background-color: #e3f2fd;
      color: #2196f3;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      margin-right: 12px;
      flex-shrink: 0;
      margin-top: 3px;
    }
    
    .step-content {
      flex: 1;
      text-align: left;
    }
    
    .step-title {
      font-weight: 600;
      margin-bottom: 5px;
      font-size: 15px;
    }
    
    .step-desc {
      font-size: 13px;
      color: #666;
      line-height: 1.4;
    }
    
    .guide-empty .btn {
      width: 100%;
      padding: 14px;
      font-size: 17px;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">我的收藏</h1>
    <a href="#" class="nav-btn primary" id="filterBtn">
      <i class="fa fa-filter"></i>
    </a>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="standard">标准空状态</div>
      <div class="style-tab" data-style="card">卡片式空状态</div>
      <div class="style-tab" data-style="simple">简约空状态</div>
      <div class="style-tab" data-style="guide">引导式空状态</div>
    </div>
  </div>
  
  <!-- 样式1 - 标准空状态 -->
  <div class="empty-page active standard-empty" id="standard">
    <div class="empty-container">
      <div class="empty-icon">
        <i class="fa fa-bookmark-o"></i>
      </div>
      <h3 class="empty-title">暂无收藏内容</h3>
      <p class="empty-desc">您还没有收藏任何内容，快去发现感兴趣的内容并收藏吧</p>
      <div class="empty-actions">
        <button class="btn btn-primary" onclick="showToast('进入发现页面')">去发现</button>
        <button class="btn btn-secondary" onclick="showToast('查看帮助')">了解更多</button>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 卡片式空状态 -->
  <div class="empty-page card-empty" id="card">
    <div class="empty-container">
      <div class="empty-icon">
        <i class="fa fa-heart-o"></i>
      </div>
      <h3 class="empty-title">还没有喜欢的内容</h3>
      <p class="empty-desc">当您喜欢某些内容时，可以点击心形按钮进行收藏，方便日后查看</p>
      <div class="empty-actions">
        <button class="btn btn-primary" onclick="showToast('浏览推荐内容')">查看推荐</button>
      </div>
    </div>
  </div>
  
  <!-- 样式3 - 简约空状态 -->
  <div class="empty-page simple-empty" id="simple">
    <div class="empty-container">
      <div class="empty-icon">
        <i class="fa fa-star-o"></i>
      </div>
      <h3 class="empty-title">暂无收藏</h3>
      <p class="empty-desc">收藏的内容会显示在这里</p>
      <div class="empty-actions">
        <button class="btn btn-primary" onclick="showToast('返回首页')">去首页看看</button>
      </div>
    </div>
  </div>
  
  <!-- 样式4 - 引导式空状态 -->
  <div class="empty-page guide-empty" id="guide">
    <div class="empty-container">
      <div class="empty-illustration">
        <div class="illustration-bg"></div>
        <div class="empty-icon">
          <i class="fa fa-bookmark-o"></i>
        </div>
      </div>
      
      <h3 class="empty-title">开始您的收藏之旅</h3>
      <p class="empty-desc">收藏喜欢的内容，随时查看和管理</p>
      
      <div class="guide-steps">
        <div class="guide-step">
          <div class="step-number">1</div>
          <div class="step-content">
            <div class="step-title">浏览感兴趣的内容</div>
            <div class="step-desc">在首页或分类频道中，发现您喜欢的文章、图片或视频</div>
          </div>
        </div>
        
        <div class="guide-step">
          <div class="step-number">2</div>
          <div class="step-content">
            <div class="step-title">点击收藏按钮</div>
            <div class="step-desc">遇到喜欢的内容，点击内容下方的收藏按钮进行保存</div>
          </div>
        </div>
        
        <div class="guide-step">
          <div class="step-number">3</div>
          <div class="step-content">
            <div class="step-title">在这里查看</div>
            <div class="step-desc">所有收藏的内容会集中显示在这里，方便您随时查看</div>
          </div>
        </div>
      </div>
      
      <button class="btn btn-primary" onclick="showToast('开始探索')">立即开始</button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const emptyPages = document.querySelectorAll('.empty-page');
    const backBtn = document.getElementById('backBtn');
    const filterBtn = document.getElementById('filterBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        emptyPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 返回按钮
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
    });
    
    // 筛选按钮
    filterBtn.addEventListener('click', function() {
      showToast('筛选功能');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          toast.style.display = 'none';
          toast.style.opacity = '1';
        }, 300);
      }, 2000);
    }
  </script>
</body>
</html>
